<template>
  <VPage class="h-[100%]">
    <VTable ref="tableRef" v-bind="tableOptins">
      <template #form="{ form }">
        <VBatchInput
          v-model="form.query_no"
          placeholder="查询单号，一次性可查30个"
          class="w-60"
          @search="query"
        />
        <VSelect
          v-model="form.logistics_id"
          :options="options.logistics_id"
          multiple
          collapse-tags
          style="min-width: 160px"
          placeholder="常用服务商"
        />
      </template>
      <template #operation="{ row }">
        <el-button
          link
          type="primary"
          v-hasPermi="[logisticsManageAuthList.track_package.track]"
          @click="handleLocus(row)"
        >
          物流轨迹
        </el-button>
      </template>
    </VTable>
    <LogisticsDetailsDialog
      v-model="detailVisible"
      :data="detailData"
      @close="detailData = {}"
    />
  </VPage>
</template>

<script setup lang="jsx">
import { ElMessage } from "element-plus";
import LogisticsDetailsDialog from "./components/LogisticsDetailsDialog/index.vue";
import { logisticsManageAuthList } from "@/Auth/logistics-manage.js";
import { quickOrderList, deleteTrack } from "./api/index";
import { logisticsList } from "@/api/index";
import VBatchInput from '@/componentsPublic/BatchInput/index.vue'
const tableRef = ref();
const options = reactive({});
const logisticsData = async () => {
  const { data } = await logisticsList();
  let list = data?.map((item) => ({
    label: item.logistics_name,
    value: item.logistics_id,
  }));
  options.logistics_id = list || [];
};
logisticsData();

const tableOptins = reactive({
  formConfig: {
    data: {},
  },
  tooltipConfig: {
    showAll: false,
  },
  isToggle: true,
  columns: [
    { fixed: "left", width: 50, type: "checkbox" },
    {
      fixed: "left",
      title: "快递单号",
      minWidth: 200,
      field: "tracking_number",
    },
    { title: "服务商", minWidth: 200, field: "logistics_name" },
    { title: "发货国家", width: 100, field: "shipping_country" },
    {
      title: "目的地国家",
      width: 100,
      field: "destination_country",
    },
    { title: "运输状态", width: 105, field: "sys_status_text" },
    { title: "订单号", minWidth: 200, field: "customer_order_no" },
    { title: "最后抓取时间", minWidth: 200, field: "api_last_time" },
    { title: "添加时间", minWidth: 200, field: "create_time" },
    { title: "运输时间", minWidth: 200, field: "delivery_time" },
    {
      title: "操作",
      width: 90,
      fixed: "right",
      slots: { default: "operation" },
    },
  ],
  proxyConfig: {
    autoLoad: false, // 是否自动加载查询数据
    props: {
      result: "data",
      total: "total",
    },
    ajax: {
      query: ({ page, form }) => quickOrderList({ ...form, ...page }),
    },
  },
});

// 查询
const query = () => {
  tableRef?.value.query();
};
const detailVisible = ref(false);
const detailData = ref({});
const handleLocus = (item) => {
  detailData.value = item || {};
  detailVisible.value = true;
};
</script>
<style lang="scss" scoped></style>
